<template>
  
  <div class="header">
    <!--声明式导航 RouterLink
    实质上RouterLink 最终会渲染成a 标签 to属性等价于提供href属性
    router-link 提供了声明式导航，声明式导航的好处是，可以配合路由的嵌套使用
    -->
    <RouterLink to="/">首页</RouterLink>
    <RouterLink to="/find">发现音乐</RouterLink>
    <RouterLink to="/my">我的音乐</RouterLink>
    <RouterLink to="/friend">我的关注</RouterLink>
    <RouterLink to="/musician">音乐人</RouterLink>
  </div>
  <div class="header-content">

  </div>
  <!--所有路由的出口-->
  <RouterView />
  <!-- <router-view></router-view> -->
</template>
<script setup>

</script>
<style scoped>

.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  background-color: black;
  
}
a{
  text-decoration: none;
  color: white;
  text-align: center;
  font-weight: 700;
  padding-left: 5px;
}
/* .header-content{
  width: 100%;
  height: 20px;
  background-color: rgb(165, 11, 11);
} */
</style>
